<script setup>
import service from '@/utils/request.utils';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import { RESPONSE_MESSAGE } from '@/constant/response'

const router = useRouter()


const phoneReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/;


const form = ref({
    'username': '17879386605',
    'password': 's1807931',
    'nickname': ""
})

function login() {
    let res = service.post("/login", { username, password })
    console.log(res)
}

function switchTo(routerName) {
    router.push(routerName)
}

async function submitForm() {
    if (!phoneReg.test(form.value.username)) {
        ElMessage({
            message: "手机号格式错误",
            type: "error"
        })
        return
    }

    if (form.value.password.length < 8) {
        ElMessage({
            message: "密码不能少于8位字符",
            type: "error"
        })
        return
    }

    if (form.value.nickname.length == 0) {
        ElMessage({
            message: "昵称不能为空",
            type: "error"
        })
        return
    }

    let res = await service.post("/register", form.value)
    console.log(res)
    if (res.status != 200) {
        ElMessage({
            message: '注册失败，状态码为: ' + res.status,
            type: 'error'
        })
        console.log(res)
    }

    if (res.data.code != '0') {
        ElMessage({
            message: RESPONSE_MESSAGE[res.data.code],
            type: "warning"
        })
    } else {
        ElMessage({
            message: "注册成功",
            type: "success"
        })
        setTimeout(() => {
            router.push("/login")
        }, 0.5);
    }

}

</script>
<template>
    <div id="outer">
        <div id="login-bg">
            <div id="login-form">
                <div id="login-form-title">
                    注册
                </div>
                <div id="login-form-main">
                    <el-form :model="form" label-width="auto" style="max-width: 600px; position: relative; bottom: 1em;">
                        <el-form-item label="昵称">
                            <el-input placeholder="请输入昵称" v-model.trim="form.nickname" />
                        </el-form-item>
                        <el-form-item label="账号">
                            <el-input type="number" placeholder="请输入手机号" v-model.trim="form.username" />
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" placeholder="请输入密码" v-model.trim="form.password" show-password />
                        </el-form-item>
                        <el-form-item style="position: relative;">
                            <el-button style="position: relative; right: 5px;" type="primary" @click="submitForm()">
                                注册
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <div id="setting">
                <!-- 不能添加click，否则跳转到login目录会直接触发click -->
                <div id="register"><el-link href="/#/login" type="primary">返回登陆</el-link></div>
            </div>
        </div>
    </div>
</template>
<style scoped>
#outer {
    margin: auto;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3em;
    font-weight: 900;
}

#login-bg {
    height: 60%;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#login-form {
    width: 100%;
    height: 70%;
    /* display: flex;
    flex-direction: column;
    justify-content: space-around; */
}

#login-form-title {
    height: 30%;
}

#login-form-main {
    margin-top: 10%;
    height: 60%;
    position: relative;
}


#setting {
    width: 100%;
    height: 30%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

#register {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>